<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>记录日常</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all"
          rel="stylesheet" type="text/css"/>

    <link href="/static/assets/css/toastr.min.css" rel="stylesheet" type="text/css"/>

    <!--<link href="/static/css/preview.css" rel="stylesheet" type="text/css" />-->

    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <style type="text/css">
        #imgBox img {
            display: inline;
            width: 30%;
            height: 30%;
            margin: 5px auto;
            margin-right: 5px;
        }

        #fullPage {
            display: none;
            background: black;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 19930428;
        }

        #fullPage img {
            display: block;
            width: 100%;
        }

        #canvas {
            width: 100%;
            height: 100%;
            background: none;
            display: block;
        }

        .time {
            color: #887f78;
            font-size: 14px;
            /*float: left;*/
            display: inline;
        }

        pre {
            margin-top: 10px;
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            margin-top: 8px;
            font-family: 微软雅黑;
            font-weight: bold;
        }

        .doOption {
           float: right;
            color: #000;
            margin-right: 10px;
            padding: 2px;
            font-size: 12px;
        }

    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand glyphicon glyphicon-triangle-right" href="#">小日常</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/tops/toTops">首页</a></li>
                <li><a href="/tops/toPublish">发表</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container" style="margin-top: 60px">

    <div id="fullPage">
        <canvas id="canvas"></canvas>
    </div>

    <div style="float: left;width: 100%; margin-bottom: 10px" th:each="top: ${topsList}">
        <div style="width:20%;float:left;">
            <img th:if="${top.tops.userId == 1}" src="/static/img/boy.jpg" class="img-rounded" style="max-width:44px; min-height: 44px; ">
            <img th:if="${top.tops.userId == 2}" src="/static/img/girl.jpg" class="img-rounded" style="max-width:44px; min-height: 44px; ">
        </div>
        <div style="width:80%;float: left;text-align: left;">
            <h5 style="display: inline; color: rgb(54,144,207); font-weight: bold;" th:text="${top.tops.realname}"></h5>
            <pre  th:text="${top.tops.content}"></pre>

            <div id="imgBox">
                <img th:each="img :${top.galleryList}" th:src="${img.url}+'?x-oss-process=image/auto-orient,1'", th:alt="${img.fileName}"/>
            </div>

            <div class="time">
                <p style="float: left;" th:text="${#dates.format(top.tops.createTime, 'yyyy-MM-dd hh:mm:ss')}"></p>
                <a class="doOption" href="javascript:void(0);" th:onclick="doDelete([[${top.tops.id}]])">删除</a>
                <a class="doOption" href="javascript:void(0);"  th:onclick="doCommont([[${top.tops.id}]])">评论</a>
            </div>

        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="/static/js/wxScale.js" type="text/javascript"></script>

<script src="/static/assets/js/toastr.min.js"></script>
<script src="/static/assets/js/bootbox.locales.min.js"></script>
<script src="/static/assets/js/bootbox.min.js"></script>
<script src="/static/assets/js/bootbox.all.min.js"></script>


<script>

    $(document).ready(function () {
        toastr.options.positionClass = 'toast-bottom-center';

        //初始化
        var wxScale = new WxScale({
            fullPage: document.querySelector("#fullPage"),
            canvas: document.querySelector("#canvas")
        });
        var imgBox = document.querySelectorAll("#imgBox img"); //为需要的图片添加放大功能
        for (var i = 0; i < imgBox.length; i++) {
            imgBox[i].onclick = function (e) {
                wxScale.start(this); //这里的this指向需要放大的这张图片
            }
        }
    });


    //删除
    function doDelete(topsId) {

        var data = {
            "topsId": topsId
        };

        $.ajax(
            {
                type: "GET",
                contentType: "application/json;charset=UTF-8",
                url: "/tops/deleteTops",
                data: data,
                dataType: "json",
                //请求成功
                success: function (result) {
                    if (result != null && result != '' && result.status == 200){
                        toastr.success('删除成功啦');
                    }else {
                        toastr.error('删除失败了哦');
                    }
                    setTimeout(function () {
                        window.location.reload()
                    }, 2000);

                },
                async: false
            });

    }

    function doCommont(topsId) {

        alert("点击评论 ：" + topsId);
    }


</script>


</body>
</html>